<template>
  <div>
    <el-row>
      <el-col :span="21">
        <div id="suggestTitle">
          <i class="el-icon-edit-outline"></i>
          <b>物业投诉</b>
        </div>
      </el-col>
      <el-col :span="3">
        <el-button type="danger"
                   size="small"
                   @click="insertsuggest()">我要投诉</el-button>
      </el-col>
    </el-row>
    <br>
    <!-- 表格主体 -->
    <el-table :data="tableData">
      <el-table-column label="投诉用户"
                       prop="user.account"
                       align="center"></el-table-column>
      <el-table-column label="被投诉小区"
                       prop="community.name"
                       align="center"></el-table-column>
      <el-table-column label="投诉内容"
                       prop="content"
                       align="center"
                       width="150"
                       :show-overflow-tooltip='true'></el-table-column>
      <el-table-column label="投诉时间"
                       prop="suggestTime"
                       align="center"
                       width="175"
                       :show-overflow-tooltip='true'></el-table-column>
      <el-table-column label="回复内容"
                       prop="reply"
                       align="center"
                       width="150"
                       :show-overflow-tooltip='true'></el-table-column>
      <el-table-column label="回复时间"
                       prop="replyTime"
                       align="center"
                       width="175"
                       :show-overflow-tooltip='true'></el-table-column>
      <el-table-column label="是否处理"
                       prop="result"
                       align="center"></el-table-column>
      <el-table-column label="操作"
                       align="center"
                       width="200">
        <template slot-scope="td">
          <!-- 查看 td.row当前这一行的对象 -->
          <el-button type="success"
                     size="mini"
                     @click="show(td.row)">查看</el-button>
          <!-- 删除 -->
          <el-button type="danger"
                     size="mini"
                     @click="del(td.$index,td.row)"
                     v-if="td.row.result==='已处理'">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[5, 10, 15]"
                   :page-size="size"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>

    <!-- 查看：对话框 -->
    <el-dialog title="查看详情"
               :visible.sync="dialogVisible"
               width="60%">
      <!-- 使用子组件 -->
      <suggestdetail v-if="refresh"
                     :suggest="currentSuggest"></suggestdetail>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 投诉：对话框 -->
    <el-dialog title="投诉内容"
               :visible.sync="insertVisible"
               width="60%">
      <!-- 使用子组件 -->
      <insertsuggest v-if="refresh"
                     @closeinsert="commit"></insertsuggest>
    </el-dialog>

  </div>
</template>

<script>
// 导入子组件
import suggestdetail from './Suggest/suggestdetail';
import insertsuggest from './Suggest/insertsuggest';

import http from '../../../axios_config'

export default {
  data () {
    return {
      tableData: [],           //表格数据
      currentSuggest: {},      //指向当前被选中的suggest信息
      dialogVisible: false,    //查看对话框是否显示
      insertVisible: false,    //查看对话框是否显示
      refresh: true,           //强制刷新子组件
      currentPage: 1,          //当前页
      total: 0,                //总条数
      totalPage: 0,            //总页数
      size: 10,                //每一页大小
      inputName: "",           //搜索栏内容
      multipleSelection: [],   //每一行数据的选择框
      count: 0,                  //用于技术弹窗次数,为0才弹出
    }
  },
  methods: {
    //查看
    show (row) {
      //查看当前被选中的suggest
      this.currentSuggest = row;
      //显示对话框
      this.dialogVisible = true;
    },


    //删除单行
    del (index, row) {
      this.$confirm('您确定要删除该条记录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        //从表格中删除当行数据
        this.tableData.splice(index, 1);
        //row.id 才是数据库中的id
        http.get("http://192.168.11.18:8080/suggest/del?id=" + row.id)
          .then(res => {

          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //新增投诉
    insertsuggest () {
      //强制刷新
      this.refresh = false;
      this.$nextTick(() => {
        this.refresh = true;
      });
      this.insertVisible = true;
    },
    //点击提交投诉
    commit (data) {
      this.insertVisible = false;
      if (data.result == true) {
        http.get("http://192.168.11.18:8080/suggest/insertSuggest?id=" + data.data.label + "&content=" + data.data.content)
          .then(res => {
            console.log(res.data);
            if (res.data.statusCode == 200) {
              //投诉成功
              this.tableData = [];
              this.findByPage();
              this.$message('投诉成功');
            }
          });
      }
    },

    //根据页码查询当前页数据
    findByPage () {

      http.get("http://192.168.11.18:8080/suggest/findUserSuggest?current=" + this.currentPage + "&size=" + this.size)
        .then(res => {
          console.log(res.data.data);
          this.tableData = res.data.data.data;
          //分页数据
          this.total = res.data.data.total;
          this.totalPage = res.data.data.totalPage;
          this.currentPage = res.data.data.currentPage;
          this.size = res.data.data.pageSize;
        });
    },

    //修改每一页大小
    handleSizeChange (size) {
      console.log("选择" + size);
      this.size = size;
      //发送请求获取当前页数据    page    size
      this.findByPage();
    },

    //选择第几页
    handleCurrentChange (page) {
      console.log("选择:" + page + "页");
      this.currentPage = page;
      //发送请求获取当前页数据    page    size
      this.findByPage();
    },
  },
  // 注册子组件
  components: {
    suggestdetail,
    insertsuggest
  },
  //当前组件创建完毕时
  mounted () {
    //调用方法获取第一页数据
    this.findByPage();
  }
}
</script>

<style scoped>
#suggestTitle {
  margin-left: 10px;
  font-size: 20px;
}
</style>